Why I Write CSS in JavaScript / Почему я пишу CSS в JavaScript

March 28th, 2020

Не так давно мне пришла идея написать небольшую заметку о преимуществах написания кода CSS внутри JavaScript. Как оказалось впоследствии мои мысли уже были изложены в статье одного из уважаемых разработчиков.

С его молчаливого согласия я привожу перевод его поста на указанную тему.

Without further ado I present his text in russian language.

Это вольный перевод поста Max Stoiber JavaScript разработчика из Austria. Я постарался перевести его статью не буквально - слово в слово, разбавив его, чтобы максимально сохранить общий посыл его текста.

So this is a translation of Max Stoiber's post who is Austrian JS developer. Hope you enjoy it and cheers to the author!👏

For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript.

Последние три года я добавляю стили CSS к моим веб приложениям без каких-либо .css файлов. Вместо этого я пишу весь CSS код прямо в JavaScript.

I know what you are thinking: “why would anybody write CSS in JavaScript?!” Let me explain.

Я знаю о чем вы думаете: "Зачем кто-то будет писать CSS в JavaScript?!" Позвольте я поясню немного.

What Does CSS-in-JS Look Like? / Как выглядит CSS-in-JS?

Developers have created different flavors of CSS-in-JS. The most popular to date, with over 20,000 stars on GitHub, is a library I co-created, called styled-components.

Разработчики напридумывали кучу разных способов имплементировать CSS-in-JS. Самый популярный на данный момент является библиотека styled-components которую я помогал создавать.

Using it with React looks like this:

Вот как её можно использовать в React:

import styled from "styled-components"; const Title = styled.h1` color: palevioletred; font-size: 18px; `; const App = () => <Title>Hello World!</Title>;

This renders a palevioletred <h1> with a font size of 18px to the DOM:

Этот код воспроизводит в DOM тег <h1> лилового цвета с размером шрифта равным 18px

Hello World!

Why I like CSS-in-JS / Почему мне нравится CSS-в-JS

Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets! ✨

В первую очередь, используя принцип CSS-in-JS повышает уверенность в коде. Я могу добавлять, изменять и удалять CSS свойства избегая неожиданных последствий. Изменения в стилизации компонента не касаются ничего более кроме как самого компонента. Если я удаляю компонент, я удаляю и его CSS свойства тоже. Больше никаких append-only списков стилей.

Confidence: Add, change and delete CSS without any unexpected consequences and avoid dead code.

Уверенность: Добавлять, изменять и удалять CSS без каких - либо неожиданных последствий и избегать "мёртвого" кода.

Painless Maintenance: Never go on a hunt for CSS affecting your components ever again.

Teams I have been a member of are especially benefitting from this confidence boost. I cannot expect all team members, particularly juniors, to have an encyclopedic understanding of CSS. On top of that, deadlines can get in the way of quality.

With CSS-in-JS, we automatically sidestep common CSS frustrations such as class name collisions and specificity wars. This keeps our codebase clean and lets us move quicker. 😍

Enhanced Teamwork: Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.

Regarding performance, CSS-in-JS libraries keep track of the components I use on a page and only inject their styles into the DOM. While my .js bundles are slightly heavier, my users download the smallest possible CSS payload and avoid extra network requests for .css files.

This leads to a marginally slower time to interactive, but a much quicker first meaningful paint! 🏎💨

Fast Performance: Send only the critical CSS to the user for a rapid first paint.

I can also easily adjust the styles of my components based on different states (variant="primary" vs variant="secondary") or a global theme. The component will apply the correct styles automatically when I dynamically change that context. 💅

Dynamic Styling: Simply style your components with a global theme or based on different states.

CSS-in-JS still offers all the important features of CSS preprocessors. All libraries support auto-prefixing, and JavaScript offers most other features like mixins (functions) and variables natively.

I know what you are thinking: “Max, you can also get these benefits with other tools or strict processes or extensive training. What makes CSS-in-JS special?”

CSS-in-JS combines all these benefits into one handy package and enforces them. It guides me to the pit of success: doing the right thing is easy, and doing the wrong thing is hard (or even impossible).

Who Uses CSS-in-JS?

Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and many more. (including this website)

Тысячи компаний, таких как Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, и многие другие (в том числе github.com), используют принцип CSS-in-JS в продакшене.

Is CSS-in-JS For You? / Подходит ли тебе принцип CSS-in-JS?

If you are using a JavaScript framework to build a web app with components, CSS-in-JS is probably a good fit. Especially if you are part of a team where everybody understands basic JavaScript.

Если вы пользуетесь библиотеками JavaScript для создания приложений используя компонентный подход, CSS-in-JS возможно лучший выбор для вас. Особенно если вы работаете в команде где все более - менее понимают основы JavaScript

If you are not sure how to get started, I would recommend trying it out and seeing for yourself how good it feels! ✌️

Если же вы сомневаетесь начинать ли использовать CSS-in-JS в своей работе или нет, я бы порекомендовал обязательно попробовать такой принцип и посмотреть как хорошо всё получается! ✌️